Bog layout template

About the "Breakout SMOL grid" / "No container grid"

It can be useful to have a system in place that's easy to go full-width, or have a "breakout" section for calls to action or blockquotes, or other things you want to call attention to.

Traditionally, we use a container or wrapper, which we need to close, and then open again, but thanks to grid, and with the recent additions of subgrid to all the evergreen browsers, maybe there's a better way to do things?

It has it's downsides, as the code is more complex, and it's not as obvious how it works when we're so used to the old pattern.

That said, we shouldn't limit ourselves just because we are used to working in a specific way.

Back to normal

To improve user experience, it's adviced to not overuse this type of resources, as the constant breakout feels as distracting as annoying. Avoid breakout the text line too frequently (as you can see right now).

A thumb of rule could be that the higger difference in witdh a breakout element has, the lesser its frequency of use should be.

In contrast, movile experience doesn't have this type of issues as the layout collaps and this types of breakouts get more nuanced (even full-width elements). Regardless of this, use it discreetly.

Images as full-bleed doesn't work on desktop..

In desktop and wider screens, any element with the utilitarian class "full-width" will appear clipped as they will never meet the sides of the viewport; they are surrounded by two asides. In order to mask this error, a border radius is being applied to make it appear as a constrained element.

The same thing happens if a background color utility class is applied. And for the sake of consistency, this rule also applies to breakout elements.

Eligendi ea maiores asperiores sed nobis qui, animi sint? Ratione laboriosam cum quasi repudiandae in, necessitatibus veritatis nihil perferendis maiores consequuntur magnam perspiciatis minus est quibusdam, voluptate voluptas natus corporis.

Vero, facilis! Animi quam dolor a sunt, quae placeat perspiciatis quia odio quisquam at tempore dolorem eum ratione vel minima eaque repellendus dolores architecto necessitatibus velit reprehenderit amet et rem.

Quos, animi expedita facere iste soluta accusamus et facilis, temporibus nemo praesentium iusto aliquam voluptas magnam pariatur blanditiis optio, corporis laborum quas? Quis libero aperiam est fuga veniam eos tenetur?